<template>
	<view>
	  <el-divider content-position="left">
		<span class="h1" style="font-size: 25px;">个人设置</span>
	  </el-divider>
	  <h1>密码修改</h1>
	  <el-card style="max-width: 480px;margin: 0 auto;">
		<template #header>
		  <div class="card-header">
			<span>密码修改</span>
		  </div>
		</template>
		<!-- <el-form ref="passwordForm" :model="passwordForm" :rules="rules" label-width="100px">
			<el-form-item label="当前密码" prop="oldPassword">
				<el-input type="password" v-model="passwordForm.oldPassword" autocomplete="off"></el-input>
			  </el-form-item>
			  <el-form-item label="新密码" prop="newPassword">
				<el-input type="password" v-model="passwordForm.newPassword" autocomplete="off"></el-input>
			  </el-form-item>
			  <el-form-item label="确认密码" prop="confirmPassword">
				<el-input type="password" v-model="confirmPassword" autocomplete="off"></el-input>
			  </el-form-item>
			  <el-form-item>
				<el-button type="primary" @click="submitForm">提交</el-button>
				<el-button @click="resetForm">重置</el-button> 
			</el-form-item>
		</el-form> -->
		<el-form :model="formData" ref="vForm" :rules="rules" label-position="right" label-width="90px"
    size="default" @submit.prevent>
    <el-form-item label="当前密码:" prop="password" class="required">
      <el-input v-model="formData.password" type="text" clearable></el-input>
    </el-form-item>
    <el-form-item label="新密码:" prop="newPassword" class="required">
      <el-input v-model="formData.newPassword" type="password" clearable></el-input>
    </el-form-item>
    <el-form-item label="确认密码:" prop="confirmPassword" class="required">
      <el-input v-model="formData.confirmPassword" type="password" clearable></el-input>
    </el-form-item>
	<el-form-item>
		<el-button type="primary" @click="submitForm">提交</el-button>
		<el-button @click="resetForm">重置</el-button> 
	</el-form-item>
  </el-form>
	  </el-card>
	</view>
  </template>
  
  <script>
  import {
    defineComponent,
    toRefs,
    reactive,
    getCurrentInstance
  }
  from 'vue'
 import { ElNotification } from 'element-plus'
  import {admin} from '@/api'
  export default defineComponent({
    components: {},
    props: {},
    setup() {
      const state = reactive({
        formData: {
          password: "",
          newPassword: "",
          confirmPassword: "",
        },
		formDTO:{
			userId:"",
			password: "",
          newPassword: "",
		},
        rules: {
          password: [{
            required: true,
            message: '字段值不可为空',
          }],
          newPassword: [{
            required: true,
            message: '字段值不可为空',
          }],
          confirmPassword: [{
            required: true,
            message: '字段值不可为空',
          }],
        },
      })
      const instance = getCurrentInstance()
      const submitForm = () => {
        instance.proxy.$refs['vForm'].validate(valid => {
          if (!valid) return
		  //验证
		  if(state.formData.newPassword != state.formData.confirmPassword){
			  instance.proxy.$message.error("两次输入的密码不一致")
			  return
		  }
		  console.log(state.formDTO)
          //TODO: 提交表单
		  state.formDTO.userId = sessionStorage.getItem("adminId")
		  state.formDTO.password = state.formData.password
		  state.formDTO.newPassword = state.formData.newPassword
		  admin.pwd(state.formDTO).then(res=>{
			console.log(res);
			if(res.data.code==200){
				ElNotification({
				title: 'Success',
				message: '修改成功',
				type: 'success',
			})
			}else if(res.data.code==0){
				ElNotification({
				title: 'Warning',
				message: '修改失败，请检查密码是否正确',
				type: 'warning',
			})
			}
			
		  })
        })
      }
      const resetForm = () => {
        instance.proxy.$refs['vForm'].resetFields()
      }
      return {
        ...toRefs(state),
        submitForm,
        resetForm
      }
    }
  })
  
</script>
<style scoped>
.h1, .card-header {
  font-weight: bold;
}
.h1 {
  font-size: 25px;
}
.card-header {
  font-size: 18px;
}
</style>